<%--
  Created by IntelliJ IDEA.
  User: wxg
  Date: 2018/5/8
  Time: 23:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../common/head.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>${title}</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="description" content="">

    <link rel="stylesheet" href="/lib/weui.min.css">
    <link rel="stylesheet" href="/css/jquery-weui.css">
    <link rel="stylesheet" href="/css/home.css">
    <style>

        .city {
            display: block;
            position: relative;

        }
        .city .city-wrapper {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
        .city .city-wrapper .cities .title {
            height: 28px;
            padding-left: 16px;
            line-height: 28px;
            background-color: #f5f5f5;
            font-family: Helvetica;
            color: #878787;
        }
        .city .city-wrapper .cities .item {
            height: 44px;
            padding: 0 16px;
            line-height: 44px;
        }
        .city .city-wrapper .cities .item .name {
            display: block;
            position: relative;
        }
        .city .city-wrapper .cities .item .name:before,
        .city .city-wrapper .cities .item .name:after {
            display: block;
            position: absolute;
            border-top: 1px solid #e5e5e5;
            left: 0;
            width: 100%;
            content: ' ';
        }
        .city .city-wrapper .cities .item .name:before {
            display: none;
            top: 0;
        }
        .city .city-wrapper .cities .item .name:after {
            display: block;
            bottom: 0;
        }
        .city .city-wrapper .cities .item:active {
            background-color: #f0f0f0;
        }
        .city .city-wrapper .cities .item:last-child .name:after {
            display: none;
        }
        .city .city-wrapper .shortcut {
            position: absolute;
            z-index: 30;
            width: 40px;
            right: 0;
            font-family: Helvetica;
        }
        .city .city-wrapper .shortcut .item {
            height: 12px;
            padding-top: 4px;
            padding-left: 24px;
            text-align: center;
            color: #fa8919;
        }
        @media only screen and (max-height: 600px) {
            .city .city-wrapper .shortcut .item {
                padding-top: 3px;
            }
        }

        ::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }

        ::-webkit-scrollbar-track-piece {
            background-color: rgba(0, 0, 0, 0.2);
            -webkit-border-radius: 6px;
        }

        ::-webkit-scrollbar-thumb:vertical {
            height: 5px;
            background-color: rgba(125, 125, 125, 0.7);
            -webkit-border-radius: 6px;
        }

        ::-webkit-scrollbar-thumb:horizontal {
            width: 5px;
            background-color: rgba(125, 125, 125, 0.7);
            -webkit-border-radius: 6px;
        }
        li {
            list-style: none;
        }
        .patients{color: #000;
            -webkit-tap-highlight-color: rgba(0,0,0,0);padding:8px 0px;border-bottom: lightgray dashed 1px}
        .weui-media-box_appmsg .weui-media-box__hd{margin-right:0.4em}
        .sub-title{font-size: 12px;color:#999}
        .weui-media-box__title{color:#4b4a48}
        .cha-way{position: absolute;right:5px;bottom: -3px;font-size: 11px}
        .info-block{position: relative; color: lightgray}
        .weui-cell__bd{font-size:0.8rem}
    </style>
</head>
<body>
<div class="weui-flex">
    <div class="weui-flex__item">
        <div class="home-header">
            <h2>全部患者</h2>
        </div>

        <div class="weui-search-bar" id="searchBar">
            <form class="weui-search-bar__form">
                <div class="weui-search-bar__box">
                    <i class="weui-icon-search"></i>
                    <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
                    <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                </div>
                <label class="weui-search-bar__label" id="searchText">
                    <i class="weui-icon-search"></i>
                    <span>搜索</span>
                </label>
            </form>
            <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
        </div>

        <div style="">
            <div class="city">
                <div class="city-wrapper city-wrapper-hook">
                    <div class="scroller-hook"
                         style="transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);">
                        <div class="cities cities-hook">

                            <c:forEach items="${fristEn}" var="en">
                                <c:set var="j" value="0"></c:set>
                                <c:forEach items="${patients}" var="patient" varStatus="i">
                                    <c:if test="${patient.lastName==en}">
                                        <c:if test="${j==0}">
                                            <div class="title" id="en_${en}">${patient.lastName}</div>
                                            <c:set var="j" value="1"></c:set>
                                            <%--<ul>--%>
                                        </c:if>
                                       <%-- <li class="item" data-name="${patient.patientname}" data-id="64"><span class="border-1px name">${patient.patientname}</span>
                                        </li>--%>
                                        <a href="javascript:void(0);" class="patients weui-media-box_appmsg">
                                            <div class="weui-media-box__hd">
                                                <img class="weui-media-box__thumb" src="${patient.patientPicPath}" alt="">
                                            </div>
                                            <div class="weui-media-box__bd info-block" >
                                                <h4 class="weui-media-box__title">
                                                        ${patient.patientname} <span class="sub-title">${patient.sex}
                                                         <c:if test="${not empty patient.age}">
                                                            ${patient.age}岁</span>
                                                         </c:if>
                                                <span class="weui-media-box__title-after" style="font-size:10px">

                                                        <%--<fmt:formatDate value="${patient.patientCreatedate}" pattern="MM-dd HH:mm:ss"/>--%>

                                                </span>
                                                </h4>
                                                <p class="weui-media-box__desc" style="font-size: 11px;margin-top: 5px;">${patient.phone}</p>
                                                <span class="cha-way"></span>
                                            </div>
                                        </a>
                                    </c:if>

                                </c:forEach>
                                <%--</ul>--%>
                            </c:forEach>
                            

                        </div>
                    </div>
                    <div class="shortcut shortcut-hook" style="top: 136px;">
                        <ul>
                            <li data-anchor="★" class="item">★</li>
                            <c:forEach items="${fristEn}" var="en">
                                <c:set var="j" value="0"></c:set>
                                <c:forEach items="${patients}" var="patient" varStatus="i">
                                    <c:if test="${j==0}">
                                        <c:if test="${patient.lastName==en}">
                                            <li data-anchor="${en}" class="item"><a href="#en_${en}">${en}</a></li>
                                            <c:set var="j" value="1"></c:set>
                                        </c:if>
                                    </c:if>
                                </c:forEach>
                            </c:forEach>


                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/plugins/scroll/bscroll.min.js"></script>
<script>
    var cityWrapper = document.querySelector('.city-wrapper-hook');
    var cityScroller = document.querySelector('.scroller-hook');
    var cities = document.querySelector('.cities-hook');
    var shortcut = document.querySelector('.shortcut-hook');

    var scroll;

    var shortcutList = [];
    var anchorMap = {};

    //bind Event
    function bindEvent() {
        //shortcut.style.top = (cityWrapper.clientHeight - shortcut.clientHeight) / 2 + 'px';
        scroll = new window.BScroll(cityWrapper, {
            probeType: 3
        });
        scroll.scrollTo(0, 50);

        var touch = {};
        var firstTouch;

        shortcut.addEventListener('touchstart', function (e) {
            var anchor = e.target.getAttribute('data-anchor');
            firstTouch = e.touches[0];
            touch.y1 = firstTouch.pageY;
            touch.anchor = anchor;
            scrollTo(anchor);
        });
        shortcut.addEventListener('touchmove', function (e) {
            firstTouch = e.touches[0];
            touch.y2 = firstTouch.pageY;
            var anchorHeight = 16;
            var delta = (touch.y2 - touch.y1) / anchorHeight | 0;
            var anchor = shortcutList[shortcutList.indexOf(touch.anchor) + delta];
            scrollTo(anchor);
            e.preventDefault();
            e.stopPropagation();
        });
        function scrollTo(anchor) {
            var maxScrollY = cityWrapper.clientHeight - cityScroller.clientHeight;
            var y = Math.min(0, Math.max(maxScrollY, anchorMap[anchor]));
            if (typeof y !== 'undefined') {
                scroll.scrollTo(0, y);
            }
        }
    }

    bindEvent();
</script>
</body>
</html>